<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
		<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js" ></script>
		<script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js" ></script>
		<link rel="stylesheet" href="../js/easyui/themes/default/easyui.css" />
		<link rel="stylesheet" href="../js/easyui/themes/icon.css" />
		<title></title>
		<script type="text/javascript">
			$(function(){
				$("#grid").datagrid({
					columns:[[
						{
							field:'id',
							title:'编号',
							width:100,
							editor : {
								type: 'validatebox',
								options: {
									required : true 
							}
						}
						},
						{
							field:'name',
							title:'名称',
							width:200,
							editor : {
								type: 'validatebox',
								options: {
									required : true 
							}
						}
						},
						{
							field:'price',
							title:'价格',
							width:200,
							editor : {
								type: 'validatebox',
								options: {
									required : true 
							}
						}
						}
					]],
					toolbar : [
						{
							id:'add',
							text:'添加',
							iconCls:'icon-add',
							handler:function(){
								$("#grid").datagrid("insertRow",{
									index:0,
									row:{}
								});
							}
						},
						{
							id:'edit',
							text:'编辑',
							iconCls:'icon-edit',
							handler:function(){
								if (quanindex != undefined) {
									return;
								}
								var row = $("#grid").datagrid("getSelected");
								var index = $("#grid").datagrid("getRowIndex",row);
								$("#grid").datagrid("beginEdit",index);
								quanindex = index;
							}
						},
						{
							id:'save',
							text:'保存',
							iconCls:'icon-save',
							handler:function(){
								$("#grid").datagrid("endEdit",quanindex);
							}
						},{
							id:'cancel',
							text:'取消',
							iconCls:'icon-cancel',
							handler:function(){
								$("#grid").datagrid("cancelEdit",quanindex);
							}
						}
					],
					url:"product.json",
					singleSelect:true
				});
				var quanindex;
			});
		</script>
	</head>
	<body>
		<table id="grid"></table>
	</body>
</html>
